<template>
	<view class="contain">
		<qiun-title-bar title="湛江第四小学心理健康问题的人数占比"/>
		<view class="charts-box">
		  <qiun-data-charts type="bar" :opts="Xvar" :chartData="chartsDataColumn1.data" background="none"/>
		</view>
		<view class="charts-box">
		  <qiun-data-charts type="bar" :opts="Xvar" :chartData="chartsDataColumnBlue.data" background="none"/>
		</view>
		<!-- 柱状图 -->
		<view class="charts-box">
		  <qiun-data-charts type="column" :chartData="chartsDataColumnBase.data" />
		</view>
		<view style="width:100%; text-align:center; font-size:36rpx; font-weight:bold;margin-top:70rpx;">复变抑郁焦虑访谈(FADI)</view>
		<!-- 环形图+渐变色 -->
		<view class="charts-box" style="width:100%;margin-top:20rpx;">
		  <qiun-data-charts type="ring" :opts="{legend:{position: 'bottom'},title: {name:'总人数'},subtitle: {name:'704人'},extra:{ring:{ringWidth: 30,linearType:'custom',centerColor:'#FF0'}}}" :chartData="chartsDataRing1.data"/>
		</view>
	</view> <!-- contain End -->
</template>

<script setup lang='ts'>
import { ref,reactive } from 'vue'
import demodata from './mockdata/demodata.json';
import { onLoad,onShow,onReady } from '@dcloudio/uni-app'
let chartsDataColumnBase=reactive({data:null});
let chartsDataColumn1=reactive({data:null});
let chartsDataColumnBlue=reactive({data:null});
let chartsDataRing1=reactive({data:null});
let Xvar=reactive({
	xAxis:{
		max:70,
		formatter: function (value, index) {
		            // 使用 moment.js 格式化日期
		            return value+"%";
		}
	},
});
const getServerData=()=>{
	
	  setTimeout(() => {
	  	//因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
	  	//开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
		chartsDataColumnBase.data=JSON.parse(JSON.stringify(demodata.ColumnBase))
	    chartsDataColumn1.data=JSON.parse(JSON.stringify(demodata.Column))
		chartsDataColumnBlue.data=JSON.parse(JSON.stringify(demodata.ColumnBlue))
		chartsDataRing1.data=JSON.parse(JSON.stringify(demodata.PieA))
		console.log(chartsDataColumn1.data);
	  }, 1500);
	
}
onReady(()=>{
		//模拟从服务器获取数据
		getServerData()
});
</script>

<style lang='scss' scoped>
	@import "schoolCountView.scss";
</style>